<template>
  <div>
    <template v-for="item in treeData">
      <el-menu
          class="el-menu-vertical"
          :collapse="layoutIsCollapse"
          :unique-opened="true"
          :collapse-transition="false"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :router="true"
          @open="handleOpen"
          @close="handleClose"
          :default-active="$route.path"
      >
        <!--单层-->
        <el-menu-item :path="item.path" v-if="item.children.length==0">
          <el-icon><component :is="item.icon" /></el-icon>
          <span>{{ item.title }}</span>
        </el-menu-item>
        <!--多层-->
        <el-sub-menu :key="item.id" :path="item.path" v-if="item.children.length>0" :index="`${item.id}`">
          <template #title>
            <el-icon><component :is="item.icon" /></el-icon>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item-group v-if="item.children">
            <el-menu-item v-for="(child, cIndex) in item.children" :key="cIndex" :path="child.path">
              <el-icon><component :is="child.icon" /></el-icon>
              {{ child.title }}
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
    </template>

  </div>
</template>

<script setup lang="ts">
    import {ref} from "vue";
    // import {ChatLineRound, Expand, Fold, House, Setting, Ticket, Tools, User} from "@element-plus/icons-vue";

    const p = defineProps({
      layoutIsCollapse: Boolean,
      // menuData: Array
    })

    // const menuList = ref();

    // menuList.value = p.menuData
    const treeData = ref([
      {
        id: 1,
        parentId: 0,
        title: '工作台',
        icon: 'House',
        path: '/index',
        isShow: 1,
        children: []
      },
      {
        id: 2,
        parentId: 0,
        title: '首页配置',
        icon: 'Tools',
        path: '2',
        isShow: 1,
        children: [
          {
            id: 3,
            parentId: 2,
            title: '轮播图配置',
            icon: 'Tools',
            path: '/swiper',
            isShow: 1
          },
          {
            id: 4,
            parentId: 2,
            title: '推荐配置',
            icon: 'Tools',
            path: '/recommend',
            isShow: 1
          },
          {
            id: 5,
            parentId: 2,
            title: '公告配置',
            icon: 'Tools',
            path: '/hot',
            isShow: 1
          }
        ]
      },
      {
        id: 6,
        parentId: 0,
        title: '店铺管理',
        icon: 'Ticket',
        path: '3',
        isShow: 1,
        children: [
          {
            id: 7,
            parentId: 6,
            title: '分类管理',
            icon: 'Tools',
            path: '/toCategory',
            isShow: 1
          },
          {
            id: 8,
            parentId: 6,
            title: '店铺管理',
            icon: 'Tools',
            path: '/toStore',
            isShow: 1
          },
          {
            id: 9,
            parentId: 6,
            title: '商品管理',
            icon: 'Tools',
            path: '/toProduct',
            isShow: 1
          },
          {
            id: 10,
            parentId: 6,
            title: '订单管理',
            icon: 'House',
            path: '/toOrder',
            isShow: 1
          }
        ]
      },
      {
        id: 11,
        parentId: 0,
        title: '社区管理',
        icon: 'ChatLineRound',
        path: '4',
        isShow: 1,
        children: [
          {
            id: 12,
            parentId: 11,
            title: '文章管理',
            icon: 'Tools',
            path: '/blogInfo',
            isShow: 1
          },
          {
            id: 13,
            parentId: 11,
            title: '标签管理',
            icon: 'Tools',
            path: '/input',
            isShow: 1
          }
        ]
      },
      {
        id: 14,
        parentId: 0,
        title: '用户管理',
        icon: 'User',
        path: '/',
        isShow: 1,
        children: [
          {
            id: 15,
            parentId: 14,
            title: '用户管理',
            icon: 'Tools',
            path: '/toUsers',
            isShow: 1
          },
          {
            id: 16,
            parentId: 14,
            title: '角色管理',
            icon: 'Tools',
            path: '/toRoles',
            isShow: 1
          }
        ]
      },
      {
        id: 17,
        parentId: 0,
        title: '系统管理',
        icon: 'Setting',
        path: '6',
        isShow: 1,
        children: [
          {
            id: 18,
            parentId: 17,
            title: '修改密码',
            icon: 'Lock',
            path: '/account',
            isShow: 1
          }
        ]
      }
    ]);

    const handleOpen = () => {
    }
    const handleClose = () => {
    }
</script>

<style scoped>
  .el-menu-vertical {
    width: 200px;
    /*解决菜单栏边缘不对齐问题*/
    --el-menu-border-color:none
  }
</style>